<template>
  <div>
    <b-row>
      <div class="comment-text w-100 py-3 px-3">
        {{ comment.content }}
      </div>
    </b-row>
    <b-row class="d-flex align-items-center">
      <b-col cols="8" class="mt-3 d-flex align-items-center">
        <div class="ms-3">
          <span class="fw-light me-2">{{ comment.user }}</span>
          <small>评论时间：{{ comment.create_time }}</small>
        </div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
export default {
  name: "CommentItem",
  props: ['comment'],
  data() {
    return {

    };
  },
};
</script>

<style lang="less" scoped>
.comment-text {
  border: 1px solid rgba(238, 238, 238, 0.9);
  border-radius: 0.5em;
  position: relative;
  background-color: #fff;
}
.comment-text:before {
  content: " ";
  position: absolute;
  top: 100%;
  left: 34px;
  width: 0;
  height: 0;
  border-top: 17px solid rgba(238, 238, 238, 0.9);
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
}
.comment-text:after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 35px;
  width: 0;
  height: 0;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.answer {
  border-radius: 1.5em;
  background-color: #f3f3f3;
  border: none;
  color: #666;
}
.submit {
  background-color: rgb(208, 66, 44) !important;
  color: #f3f3f3;
  border-radius: 1.5em;
  border: none;
}
.submit:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
</style>

